<div class="row">
  <div class="col-sm-4 pe-0">
    <div class="card">
      <div class="card-header">
        <button type="button"
                [class.disabled]="loadingIndicator"
                class="btn btn-light pull-right"
                (click)="refreshAllDirectories()">
          <i [ngClass]="[icons.large, icons.refresh]"
             [class.fa-spin]="loadingIndicator"></i>
        </button>
      </div>
      <div class="card-body">
        <tree-root *ngIf="nodes"
                   [nodes]="nodes"
                   [options]="treeOptions">
          <ng-template #loadingTemplate>
            <i [ngClass]="[icons.spinner, icons.spin]"></i>
          </ng-template>
        </tree-root>
      </div>
    </div>
  </div>
  <!-- Selection details -->
  <div class="col-sm-8 metadata"
       *ngIf="selectedDir">
    <div class="card">
      <div class="card-header">
        {{ selectedDir.path }}
      </div>
      <div class="card-body">
        <ng-container *ngIf="selectedDir.path !== '/'">
          <legend i18n>Quotas</legend>
          <cd-table [data]="settings"
                    [columns]="quota.columns"
                    [limit]="0"
                    [footer]="false"
                    selectionType="single"
                    (updateSelection)="quota.updateSelection($event)"
                    [onlyActionHeader]="true"
                    identifier="quotaKey"
                    [forceIdentifier]="true"
                    [toolHeader]="false">
            <cd-table-actions class="only-table-actions"
                              [permission]="permission"
                              [selection]="quota.selection"
                              [tableActions]="quota.tableActions">
            </cd-table-actions>
          </cd-table>
        </ng-container>

        <legend i18n>Snapshots</legend>
        <cd-table [data]="selectedDir.snapshots"
                  [columns]="snapshot.columns"
                  identifier="name"
                  forceIdentifier="true"
                  selectionType="multiClick"
                  (updateSelection)="snapshot.updateSelection($event)">
          <cd-table-actions class="table-actions"
                            [permission]="permission"
                            [selection]="snapshot.selection"
                            [tableActions]="snapshot.tableActions">
          </cd-table-actions>
        </cd-table>
      </div>
    </div>
  </div>
</div>

<ng-template #origin
             let-row="row"
             let-value="value">
  <span class="quota-origin"
        (click)="selectOrigin(value)">{{value}}</span>
</ng-template>
